<template>
  <div class="page-container">
    <PanelTab @change="handleChange">
      <template v-slot:end>
        <el-radio-group v-model="tabActive" style="margin-left: 30px" size="mini">
          <el-radio-button v-for="item in tabList" :key="item.id" :label="item.id">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </template>
    </PanelTab>
    <div class="page-content">
      <el-row>
        <el-col :span="24">
          <PanelChart2 :time="time" chartType="bar" title="发布量走势图" :data="dataBar" @methodChange="handleMethodChange" />
        </el-col>
        <el-col :span="24">
          <PanelChart3 :time="time" chartType="bar" title="资产处置·分类概况" :data="dataCls" />
        </el-col>
        <el-col :span="24">
          <PanelChart3 :time="time" chartType="pie" title="资产处置·地区概况" :data="dataArea" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { apiHyCompetitor } from '@/api/dataStatistics/index'
import PanelTab from '@/components/panel/PanelTab.vue'
import PanelChart2 from './components/PanelChart2.vue'
import PanelChart3 from './components/PanelChart3.vue'

export default {
  name: 'IndustryAsset',
  components: { PanelTab, PanelChart2, PanelChart3 },
  data() {
    return {
      time: {},
      tabActive: 'hhs',
      tabList: [
        { id: 'hhs', label: 'hhs' },
        { id: 'fb', label: 'fb' },
        { id: 'wy', label: 'wy' },
      ],
      dataBar: {},
      dataCls: {},
      dataArea: {},
      method: 1,
    }
  },
  watch: {
    time: function () {
      this.getData()
    },
    tabActive: function () {
      this.getData()
    },
  },
  mounted() {},
  destroyed() {},
  methods: {
    // 时间变动
    handleChange(time) {
      this.time = time
    },
    handleMethodChange(value) {
      this.method = value
      this.getData()
    },
    getData() {
      apiHyCompetitor({ ...this.time, label: '资产', source: this.tabActive, method: this.method }).then((res) => {
        const { bar_line, cls_data, area_data } = res
        this.dataBar = bar_line
        this.dataCls = cls_data
        this.dataArea = area_data
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page-content {
  padding-top: 62px;
}
</style>
